<template>
  <q-page class="approve-page column no-wrap" style="background-color: #fff; color: #222">
    <section class="q-px-md">
      <div class="text-center q-pt-lg" style="color: #fff; font-weight: bold; font-size: 20px">
        为您匹配了通过率较高的服务机构
      </div>
      <div class="flex items-center justify-center q-mt-sm">
        <q-icon name="south" size="xs" style="color: #fff" />
        <div style="color: #fff">
          <span>请确认以下申请信息</span>
        </div>
        <q-icon name="south" size="xs" style="color: #fff" />
      </div>
      <div class="q-px-xl q-mx-md q-mt-md">
        <q-img src="~/assets/images/approve/img1.png" :ratio="404 / 282" no-spinner />
      </div>
      <div class="" style="height: 20px"></div>
    </section>
    <section class="q-px-md q-pt-lg flex-1 no-wrap box-content">
      <div class="box-bg" style="padding: 12px; border-radius: 8px">
        <div class="flex items-center">
          <div
            v-if="urlData?.logoUrl"
            class="center overflow-hidden"
            style="border-radius: 8px; margin-right: 6px"
          >
            <q-img
              :src="urlData.logoUrl"
              :ratio="1"
              width="26px"
              height="26px"
              no-spinner
              no-transition
            />
          </div>
          <div style="font-size: 15px; font-weight: bold" class="text-line">
            <span>{{ urlData?.mainTitle ?? urlData?.compantName ?? '' }}</span>
          </div>
        </div>
        <div class="q-mt-sm overflow-hidden" style="border-radius: 12px; font-size: 13px">
          <div class="flex items-center">
            <div style="color: #666666">机构名称：</div>
            <div style="font-weight: bold">{{ urlData?.compantName ?? '' }}</div>
          </div>
          <div class="flex items-center q-mt-sm">
            <div style="color: #666666">主营业务：</div>
            <div style="font-weight: bold">信用贷款</div>
            <!-- <div style="font-weight: bold">{{ data?.dataInfo.compantTitle ?? '' }}</div> -->
          </div>
          <div class="flex items-center q-mt-sm">
            <div style="color: #666666">最低月利率：</div>
            <div style="font-weight: bold; color: #ffad13">{{ urlData?.minRate ?? '8' }}%</div>
          </div>
        </div>
      </div>

      <div class="q-mt-md box-tag" style="background: #fff4e7; border-radius: 12px; padding: 10px">
        <div class="flex items-center justify-between q-px-md box-py box-item box-item1">
          <div style="color: #fff; font-weight: bold; font-size: 16px">在线申请</div>
          <div class="center box-img"><img :src="iconTopPng1" style="width: 35px" /></div>
        </div>
        <div class="flex items-center justify-between q-px-md box-py box-item box-item2">
          <div style="color: #fff; font-weight: bold; font-size: 16px">电话初审</div>
          <div class="center box-img"><img :src="iconTopPng2" style="width: 35px" /></div>
        </div>
        <div class="flex items-center justify-between q-px-md box-py box-item box-item1">
          <div style="color: #fff; font-weight: bold; font-size: 16px">线下签约</div>
          <div class="center box-img"><img :src="iconTopPng3" style="width: 35px" /></div>
        </div>
        <div class="flex items-center justify-between q-px-md box-py box-item box-item2">
          <div style="color: #fff; font-weight: bold; font-size: 16px">审批贷款</div>
          <div class="center box-img"><img :src="iconTopPng4" style="width: 35px" /></div>
        </div>
      </div>

      <div class="box-white-r1 q-mt-md" style="padding: 10px">
        <div class="content">
          <div class="flex items-center">
            <div style="font-size: 17px; font-weight: bold" class="text-line">
              <span>业务知情同意书</span>
            </div>
          </div>


          <div style="font-size: 13px; margin-top: 10px; min-height: 150px" class="q-mb-sm">
            <iframe
              v-if="urlData?.protocolUrl"
              :src="urlData?.protocolUrl"
              scrolling="yes"
              frameborder="0"
              style="display: block; width: 100%; height: 300px"
            ></iframe>

            <div v-if="urlData?.applyName && urlData.applyIdCard" class="q-mt-md " style="color: #666;">
              <div>授权人：{{ urlData?.applyName ?? '' }}</div>
              <div class="q-mt-xs">授权人身份证：{{ urlData?.applyIdCard ?? '' }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="box-white-r2 q-mt-md" style="padding: 10px">
        <div class="content">
          <div class="flex items-center">
            <div style="font-size: 17px; font-weight: bold" class="text-line"><span>重要提示</span></div>
          </div>
          <div style="margin-top: 8px" class="flex">
            立即提交前，您已同意并知晓广告方将您的授权信息共亨至我方平台，并仔细阅读我方平台的协议内容；确认提交后，即代表您已授权并同意我方根据您的信息内容共享至为您提供贷款咨询服务的机构。
          </div>
        </div>
      </div>

      <div style="height: 120px"></div>

      <div
        style="bottom: 0; background-color: #fff; z-index: 10; left: 0; border-top: 1px solid #d4d4d4d4"
        class="fixed flex justify-center full-width q-py-lg"
      >
        <q-btn
          unelevated
          rounded
          padding="none none"
          @click="submitHandler"
          class="submit-btn q-mx-auto q-mx-auto"
          style=""
        >
          同意协议并提交
          <div class="pointer">
            <div class="white-point">
              <div class="white-point-in"></div>
            </div>
            <img src="~/assets/images/public/pointer.png" style="display: block; width: 45px" />
          </div>
        </q-btn>
      </div>
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import iconTopPng1 from 'src/assets/images/approve/icon-top1.png';
import iconTopPng2 from 'src/assets/images/approve/icon-top2.png';
import iconTopPng3 from 'src/assets/images/approve/icon-top3.png';
import iconTopPng4 from 'src/assets/images/approve/icon-top4.png';
import { computed, ref, watch } from 'vue';
import { useMechanismStore } from 'src/stores/mechanism-store';
import { approveToPushApi, getOrderInfoApi } from 'src/api/source';
import { showLoadingToast } from 'vant';
import { isArray } from 'lodash';
import CryptoJS from 'crypto-js';
import { pushToMerchantApi } from 'src/api/merchant';

const route = useRoute()
const router = useRouter();

type UrlData = {
  orderNo: string
  logoUrl?: string
  mainTitle: string
  compantName: string
  minRate: string
  protocolUrl: string
  applyName?: string
  applyIdCard?: string

}



const urlData = computed((): UrlData | undefined => {
  const temp = route.query.data as string
  if (!temp) return undefined
  return JSON.parse(CryptoJS.enc.Base64url.parse(temp).toString(CryptoJS.enc.Utf8))
})

const submitHandler = async () => {
  const toast = showLoadingToast({
    iconSize: 50,
    forbidClick: true,
    duration: 0,
  });

  await pushToMerchantApi({ orderNo: urlData.value?.orderNo })
  toast.close();
  router.replace({path: 'evaluateAuth', query: {...route.query, isToProdList: '1',}})
}
</script>

<style lang="scss" scoped>
.text-line {
  position: relative;
  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0.22em;
    width: 100%;
    height: 25%;
    z-index: 0;
    background-color: #ffad13;
  }
  span {
    position: relative;
    z-index: 1;
  }
}
.box-content {
  background-color: #fff;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}

.box-bg {
  background-color: #fff4e7;
}

.submit-btn {
  background: #ffad13;
  color: #fff;
  cursor: pointer;
  border-radius: 99999px;
  width: 90%;
  font-weight: bold;
  font-size: 15px;
  min-height: 40px;
  padding: 12px !important;
  position: relative;
  .pointer {
    position: absolute;
    right: calc(23% - 22px);
    top: 52%;
    z-index: 1;
    img {
      position: relative;
      z-index: 1;
    }
    .white-point {
      position: absolute;
      z-index: 0;
      background-color: rgba($color: #fff, $alpha: 0.4);
      border-radius: 9999px;
      $side: 14px;
      left: calc(-#{$side} / 2 + 1px);
      top: calc(-#{$side} / 2 + 1px);
      width: $side;
      height: $side;
      display: grid;
      place-content: center;
      .white-point-in {
        background-color: rgba($color: #fff, $alpha: 0.8);
        border-radius: 9999px;
        $side-in: 6px;
        width: $side-in;
        height: $side-in;
      }
    }
  }
}

@mixin box-white-r {
  border-radius: 10px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  z-index: 1;
  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    background-color: #fff4e7;
    top: 40px;
    height: 100%;
    z-index: 0;
    left: 0;
  }
  .content {
    position: relative;
    z-index: 1;
  }
}
.box-white-r1 {
  background: #fff4e7;
  @include box-white-r();
}

.box-white-r2 {
  background: #fff4e7;
  @include box-white-r();
}
.box-tag {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 8px;
  .box-py {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .box-item {
    width: 100%;
    border-radius: 8px;
    position: relative;
    div {
      z-index: 1;
      position: relative;
    }
    .box-img {
      position: absolute;
      right: 20px;
      bottom: 0;
      z-index: 0;
    }
  }
  .box-item1 {
    background: linear-gradient(90deg, rgba(255, 173, 19, 1) 0%, rgba(255, 214, 43, 1) 100%);
  }
  .box-item2 {
    background: linear-gradient(90deg, #ff8854 0%, #ffb270 100%);
  }
}
.box-bg-linear {
  background: linear-gradient(90deg, rgba(255, 249, 232, 1) 0%, rgba(255, 232, 174, 1) 100%);
  position: relative;
  .tip-img {
    position: absolute;
    $height: 36px;
    height: $height;
    width: 1.17647 * $height;
    background-size: 100% 100%;
    right: 10px;
    bottom: 0;
  }
}

.approve-page {
  background-image: url(src/assets/images/approve/bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.header {
  position: relative;
  z-index: 1;
  max-width: 100vw;
}
</style>
